<template>
  <div class="mod-config">
    <el-form ref="dataForm" :model="dataForm">
      <el-alert title="友情提示：" type="warning" :closable="false" prop="squares">
        {{dataForm.warningMessages}}
      </el-alert>
      <section class="data_section">
        <el-row :gutter="10" class="row_list">
          <el-col :span="8">
            <div class="pay data_list" prop="squares"><p class="list_number">{{dataForm.todayCount}}</p>
              <p>当日新增订单(套)</p></div>
          </el-col>
          <el-col :span="8">
            <div class="income data_list" prop="squares"><p class="list_number">{{dataForm.monthCount}}</p>
              <p>本月订单量(套)</p></div>
          </el-col>
          <el-col :span="8">
            <div class="hidden_investors data_list" prop="squares"><p class="list_number">{{dataForm.monthAmount}}</p>
              <p>本月订单金额(元)</p></div>
          </el-col>
          <el-col :span="8">
            <div class="intention_investors data_list" prop="squares"><p class="list_number">
              {{dataForm.preProductCount}}</p>
              <p>未生产订单(套)</p></div>
          </el-col>
          <el-col :span="8">
            <div class="waitpending_investors data_list" prop="squares"><p class="list_number">
              {{dataForm.productCount}}</p>
              <p>生产中订单(套)</p></div>
          </el-col>
          <el-col :span="8">
            <div class="pending_investors data_list" prop="squares"><p class="list_number">{{dataForm.paidAmount}}</p>
              <p>未回款总金额(元)</p></div>
          </el-col>
          <el-col :span="8">
            <div class="pass_investors data_list" prop="squares"><p class="list_number">{{dataForm.preStockCount}}</p>
              <p>上报采购单(笔)</p></div>
          </el-col>
          <el-col :span="8">
            <div class="newadd_investors data_list" prop="squares"><p class="list_number">{{dataForm.stockCount}}</p>
              <p>采购中单据(笔)</p></div>
          </el-col>
          <el-col :span="8">
            <div class="newadd_investors data_list" prop="squares"><p class="list_number">{{dataForm.unPaidAmount}}</p>
              <p>未付款总金额(元)</p></div>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="ad_list">
          <!--循环+超链接-->
          <ul>
            <li v-for = 'item in this.dataForm.advertisingList'>
              <a :href= item.urlStr onclick="handleClick(item.urlStr); return false;">
                <span >{{item.content}}</span>
              </a>
            </li>
          </ul>
        </el-row>
      </section>


      <section class="mod-echarts">
        <el-row :gutter="24">
          <el-col :span="17">
            <el-card>
              <div id="J_chartLineBox" class="chart-line-box"></div>
            </el-card>
          </el-col>
          <el-col :span="7">
            <el-card>
              <div id="J_chartPieBox" class="chart-pie-box"></div>
            </el-card>
          </el-col>
        </el-row>

      </section>
    </el-form>
  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data () {
      return {
        dataForm: {
          warningMessage: '', // 提醒信息
          todayCount: '',  // 当日新增订单
          monthCount: '',  // 本月订单量
          monthAmount: '', // 本月订单金额
          preProductCount: '', // 未生成订单量
          productCount: '', // 生产中订单
          paidAmount: '', // 未回款总金额
          unPaidAmount: '', // 未付款总金额
          preStockCount: '', // 上报采购单量
          stockCount: '', // 采购中订单量
          advertisingList: '' // 广告信息
        },
        chartLine: null,
        chartPie: null,
        beginTimeStrList: [],
        newCountList: [],
        proCountList: [],
        upPayAmountList: [],
        paidCountList: [],
        fundCountList: []

      }
    },
    mounted () {
      this.initChartLine()
      this.initChartPie()
    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartLine) {
        this.chartLine.resize()
      }
      if (this.chartPie) {
        this.chartPie.resize()
      }
      this.getDataList()

      this.getHomeLine()
    },
    methods: {
      handleClick (urlString) {
        window.open(urlString, '_blank')
        // '_blank'  // 新打开一个窗口
        // '_self'    // 覆盖当前的窗口
      },
      // 获取数据列表
      getDataList () {
        this.$http({
          url: this.$http.adornUrl('/home/listAll'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.warningMessages = data.dto.warningMessages
            this.dataForm.todayCount = data.dto.todayCount
            this.dataForm.monthCount = data.dto.monthCount
            this.dataForm.monthAmount = data.dto.monthAmount
            this.dataForm.preProductCount = data.dto.preProductCount
            this.dataForm.productCount = data.dto.productCount
            this.dataForm.paidAmount = data.dto.paidAmount
            this.dataForm.unPaidAmount = data.dto.unPaidAmount
            this.dataForm.preStockCount = data.dto.preStockCount
            this.dataForm.stockCount = data.dto.stockCount
            this.dataForm.advertisingList = data.dto.advertisingList
          } else {
            this.dataForm = []
          }
        })
      },
      // 获取首页折线图
      getHomeLine () {
        this.$http({
          url: this.$http.adornUrl('/home/homeLine'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.beginTimeStrList = data.dto.beginTimeStrList
            this.newCountList = data.dto.newCountList
            this.proCountList = data.dto.proCountList
            this.upPayAmountList = data.dto.upPayAmountList
            this.paidCountList = data.dto.paidCountList
            this.fundCountList = data.dto.fundCountList

            this.chartLine.resize()

            this.initChartLine()
          } else {
            this.beginTimeStrList = []
            this.newCountList = []
            this.proCountList = []
            this.upPayAmountList = []
            this.paidCountList = []
            this.fundCountList = []
          }
        })
      },
      // 折线图
      initChartLine () {
        var option = {
          'title': {
            'text': '折线图堆叠'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': ['新增销售单', '生产销售单', '待结算销售单', '已结算销售单', '收款单']
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': {}
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': this.beginTimeStrList
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '新增销售单',
              'type': 'line',
              'stack': '总量',
              'data': this.newCountList
            },
            {
              'name': '生产销售单',
              'type': 'line',
              'stack': '总量',
              'data': this.proCountList
            },
            {
              'name': '待结算销售单',
              'type': 'line',
              'stack': '总量',
              'data': this.upPayAmountList
            },
            {
              'name': '已结算销售单',
              'type': 'line',
              'stack': '总量',
              'data': this.paidCountList
            },
            {
              'name': '收款单',
              'type': 'line',
              // areaStyle: {
              //   normal: {
              //     color: '#091e3b' // 改变区域颜色
              //   }
              // },
              // itemStyle: {
              //   normal: {
              //     color: '#8ca1d5', // 改变折线点的颜色
              //     lineStyle: {
              //       color: '#8ca1d5' // 改变折线颜色
              //     }
              //   }
              // },
              'stack': '总量',
              'data': this.fundCountList
            }
          ]
        }
        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      },
      // 饼状图
      initChartPie () {
        var option = {
          title: {
            text: '生产看板',
            // subtext: '纯属虚构',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            data: ['未接单', '雕刻中', '吸塑中', '打包完']
          },
          series: [
            {
              name: '生产看板',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                {value: 335, name: '未接单'},
                {value: 310, name: '雕刻中'},
                {value: 234, name: '吸塑中'},
                {value: 135, name: '打包完'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .data_section {
    overflow: hidden;
    padding: 10px;
    width: 100%;

    .row_list {
      margin-bottom: 20px;
      width: 70%;
      min-height: 400px;
      float: left;
    }

    .ad_list {
      margin-bottom: 20px;
      width: 28%;
      min-height: 385px;
      float: right;
      border: 3px solid #0BB2D4;
    }

    .ad_button {
      margin-bottom: 20px;
      width: 100%;
      min-height: 30px;
      float: right;
    }

    .pay {
      background-color: #18a689;
    }

    .income {
      background-color: #99CC00;
    }

    .hidden_investors {
      background-color: #33CC99;
    }

    .intention_investors {
      background-color: #3b5999;
    }

    .waitpending_investors {
      background-color: #66CC99;
    }

    .pending_investors {
      background-color: #009999;
    }

    .pass_investors {
      background-color: #FF9900;
    }

    .newadd_investors {
      background-color: #0099CC;
    }

    .data_list {
      margin-bottom: 10px;
      text-align: center;
      font-size: 14px;
      border-radius: 6px;
      padding: 15px 0;
      color: #fff;

      .list_number {
        font-size: 20px;
        font-weight: bold;
      }

      .number {
        font-size: 20px;
        font-weight: bold;
      }

    }
  }

  .mod-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }

    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;

      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }

    .chart-line-box {
      min-height: 400px;
    }

    .chart-pie-box {
      min-height: 400px;
    }
  }

  .select-option {
    width: 600px;
  }
</style>
